<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Expires" content="0"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Cache-control" content="no-cache"/>
    <meta http-equiv="Cache" content="no-cache"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link rel="shortcut icon" th:if="${favicon}" th:href="${favicon}"  type="image/x-icon"/>
    <link rel="shortcut icon" th:unless="${favicon}" th:href="${'static/icon.ico'}"  type="image/x-icon"/>
    <script src="static/jquery.min.js"></script>
    <script th:src="@{static/mobile.js(t=${new java.util.Date().getTime()})}"></script>
    <title th:if="${systemTitle}" th:text="${systemTitle}"></title>
    <title th:if="!${systemTitle}" th:text="Choerodon"></title>
    <style>
        html, body {
            padding: 0px;
            margin: 0px;
            font-family: 'Microsoft YaHei', arial;
            direction: ltr;
            width: 100%;
            height: 100%;
        }

        .logoleft {
            width: 100%;
            height: 100%;
            background-image: url(static/bg.svg);
            background-repeat: no-repeat;
            background-size: cover;
        }

        .login .logo {
            font-size: 30px;
            width: 279px;
            margin: 50px auto;
            padding: 15px;
            text-align: start;
            position: relative;
            color: #0366D6;
            word-break: break-all;
        }

        .login #content {
            border-radius: 1rem;
            padding: 13% 5.3% 0 5.3%;
        }

        .login #content .form-title {
            font-weight: 300;
            margin-bottom: 25px;
            font-size: 24.5px;
        }

        .login #content .login-form {
            margin-top: 3.875rem;
        }

        .alert-error {
            color: #f92e2d;
            position: absolute;
        }

        .login #content .control-group {
            margin-bottom: 10px !important;
        }

        .control-label {
            margin-top: 2px;
            margin-bottom: 5px;
            font-size: 0.875rem;
            font-weight: normal;
            color: rgba(0, 0, 0, 0.87);
        }

        .input-icon.left i {
            color: #ccc;
            display: block !important;
            position: absolute !important;
            z-index: 1;
            margin: 9px 2px 4px 10px;
            font-size: 1rem;
            text-align: center;
        }

        .login #content .input-icon .m-wrap {
            margin: 0px !important;
        }

        .login #content .m-wrap {
            width: calc(100% - 0.6rem);
        }

        select {
            width: 220px;
            background-color: #fff;
            border: 1px solid #ccc;
            height: 30px;
            line-height: 30px;
        }

        input.m-wrap {
            border: 1px solid rgba(0, 0, 0, 0.26)
        }

        input[type="text"].m-wrap, input[type="password"].m-wrap {
            -webkit-appearance: none !important;
            outline: 0;
            height: 2rem;
            padding-left: 0.6rem !important;
            line-height: 20px;
            font-size: 0.875rem;
            font-weight: normal;
            vertical-align: top;
            background-color: #ffffff;
            background-image: none !important;
            filter: none !important;
            -webkit-box-shadow: none !important;
            -moz-box-shadow: none !important;
            box-shadow: none !important;
            -webkit-border-radius: 0px;
            -moz-border-radius: 0px;
            border-radius: 0px;
            background: transparent;
        }
        .pIcon {
            color: #3F51B5;
            height: 30px;
        }
        .pText {
            line-height: 48px;
            height: 48px;
            margin-left: 8px;
            font-size: 24px;
            color: #rgba(0, 0, 0, 0.65);
        }
        .login #content .form-actions {
            clear: both;
            padding: 10px 0 10px 0;
        }

        input.error {
            background: #fff0f0 !important;
            border-color: #A90329;
        }

        .btn {
            background-color: #3F51B5;
            background-image: none;
            filter: none;
            border: 0;
            padding: 7px 14px;
            text-shadow: none;
            font-size: 1rem;
            color: #ffffff;
            cursor: pointer;
            outline: none;
            -webkit-box-shadow: none !important;
            -moz-box-shadow: none !important;
            box-shadow: none !important;
            -webkit-border-radius: 0 !important;
            -moz-border-radius: 0 !important;
            border-radius: 0 !important;
            width: 100%;
        }

        @font-face {
            font-family: 'FontAwesome';
            src: url("static/fontawesome-webfont.woff2") format('woff2');
            font-weight: normal;
            font-style: normal;
        }

        .fa {
            display: inline-block;
            font: normal normal normal 14px/1 FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }


        .fa-refresh:before {
            content: "\f021";
        }


        #list {
            float: right;
            margin-top: 10px;
            margin-right: 10px;
            font-size: 2rem;
        }

        .remember {
            text-align: right;
        }

        .resigter {
            text-decoration: none;
            margin-right: 10px;
            font-size: 0.875rem;
            color: #3F51B5;
        }

        .forget {
            text-decoration: none;
            margin-left: 10px;
            font-size: 0.875rem;
            color: #3F51B5;
        }

        .controls {
            margin-top: 0.5rem;
        }
    </style>
</head>
<body class="login">
<div class="logoleft">
    <div id="content">
        <div style="display: flex;justify-content: center">
            <img th:if="${systemLogo}" th:src="${systemLogo}" style="height: 48px;"/>
            <span th:if="${systemName}" th:text="${systemName}" class="pText" />
            <span th:if="!${systemName}" th:text="Choerodon" class="pText" />
            <img th:if="${systemLogo}==null and ${systemName}==null" src="../static/choerodon_logo_color.svg" class="pIcon"/>
        </div>

        <div style="display: flex;justify-content: center;margin-top: 1.25rem;">
            <span style="font-size: 1.25rem;color: rgba(0,0,0,0.65);">登录</span>
        </div>
        <form class="form-vertical login-form" action="login" method="post" autocomplete="off">
            <div class="control-group">
                <label class="control-label">登录账号</label>
                <div class="controls">
                    <div th:class="${usernameNotFound}? 'input-icon left inputError' : 'input-icon left inputNormal'">
                        <input id="username" class="m-wrap " autocomplete="off" type="text" name="username"
                               th:value="${param.username != null ? param.username[0] : ''}"
                               placeholder="登录名/邮箱"/>
                    </div>
                </div>
                <div th:text="${usernameNotFound}" class="alert alert-error"></div>
                <div th:text="${userNotActive}" class="alert alert-error"></div>
                <div th:text="${accountLocked}" class="alert alert-error"></div>
            </div>


            <div class="control-group" style="margin-top: 1.375rem">
                <label class="control-label ">
                    密码 </label>
                <div class="controls">
                    <div th:class="${passwordWrong}? 'input-icon left inputError' : 'input-icon left inputNormal'">
                        <input class="m-wrap " id="password" type="password" autocomplete="off"
                               placeholder="请输入密码"/>
                        <script type="text/javascript">
                            $('#password').on('focus', function () {
                                $(this).attr('type', 'password');
                            })
                        </script>
                    </div>
                </div>
                <div th:text="${passwordWrong}" class="alert alert-error"></div>
                <div th:text="${passwordExpire}" class="alert alert-error"></div>
            </div>
            <!-- 是否开启验证码-->
            <div style="margin-top: 1.375rem" th:if="${isNeedCaptcha}" class="control-group">
                <label class="control-label ">
                    验证码
                </label>
                <div class="controls">
                    <div class="input-icon left">
                        <i class="fa fa-refresh" title="刷新验证码"
                           style="cursor: pointer; color: #999; float: right; position: static !important; border: 1px solid #ccc; height: 32px; line-height: 32px; padding: 0px 6px; margin: 0px; margin-left: 5px;"
                           onclick="changeImg()"></i>
                        <img id="imgObj" src="public/captcha"
                             style="border: 1px solid #ccc;float: right;width: 40%;height: 2rem;"
                             onclick="changeImg()"/>
                        <input placeholder="请输入验证码" class="m-wrap " type="text" style="width: 40%" name="captcha"/>
                    </div>
                </div>
            </div>
            <!--<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />-->
            <input id="md5_password" type="hidden" name="password"/>
            <div class="form-actions">
                <button type="submit" class="btn">登录</button>
            </div>

            <div style="clear:both"></div>
        </form>

    </div>
</div>

<div style="position:absolute;z-index:999;bottom:1.875rem;color: rgba(0,0,0,0.43);font-size: 0.75rem;width: 100%;text-align: center;">
    Copyright © The choerodon Author®. All rights reserved. | <a href="http://www.beian.miit.gov.cn" target="_blank" th:text="${icp}!=null?'&nbsp;&nbsp;'+${icp}:''"></a>
</div>
</body>
</html>